<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>startThree</title>
    <script src="three.js"></script>
    <style>
        html,body{
            margin:0;
            padding:0;
        }
    </style>
</head>
<body >
<script>

    //定义场景和相机
    var scene, camera, renderer;
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight);

    var cp={
        x:0,
        y:0,
        z:10,
    }
    camera.position.set(cp.x,cp.y,cp.z);
    camera.lookAt(new THREE.Vector3(0,0,0));
    scene.add(camera);

    //定义方块
    var geometry = new THREE.BoxGeometry(1,1,1);
    var material = new THREE.MeshNormalMaterial();
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    //渲染
    renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);


    //动态
    function render() {
        requestAnimationFrame(render);

//        cube.rotation.x += 0.01;
//        cube.rotation.y += 0.01;
//        cube.rotation.z += 0.01

        renderer.render(scene, camera);
    }
    render();


    window.document.onmousemove=function(evt){
        moveCamera(evt.movementX,evt.movementY,0)
    }


    moveCamera= function (x,y) {
        if(x>100||y>100){
            return
        }
        //根据挪动的位置计算相机应该在的位置
        cp.x+=x/100
        cp.y+=-y/100

        console.log("x:"+x+",y:"+y+';')
        console.log('cx:'+cp.x+",cy:"+cp.y)
        camera.position.set(cp.x,cp.y,cp.z);

    }

</script>

</body>
</html>